<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/css/wp.css" media="all">

    <style>

        .input-block{
            margin-right: 30px;
        }

        .unit{
            position: absolute;
            right: 0px;
            top: 0px;
            right: -160px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <h2 class="wp-module-title">充值</h2>
        <div class="wp-module-box">
            <form id="myform" class="layui-form" action="" lay-filter="example">
                <div class="layui-form-item input-block">
                    <label class="layui-form-label">充值地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required|customName" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">货币类型</label>
                    <div class="layui-input-block input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value=""></option>
                            <option value="1" selected="">人民币</option>
                            <option value="2">美元</option>
                        </select>
                        <div class="unit" style="color: #595959;">（用户给付的货币类型）</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">充值金额</label>
                    <div class="layui-input-block input-block">
                        <input type="text" name="password" autocomplete="off" class="layui-input">
                        <div class="unit" style="right: -55px;">SHQC</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin: auto;text-align: center;">
                        <button type="submit" style="width: 120px;" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-submit-btn">提交</button>
                        <button type="submit" style="width: 120px;" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="data-reset-btn">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var $ = layui.jquery,
            form = layui.form;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三'
            },
            mounted:function(){
                form.render();
                this.submitEvent();
                this.resetEvent();
            },
            methods: {
                submitEvent:function(){
                    var that = this;
                    // 需要的时候自定义验证规则
                    form.verify({
                        customName: function(value){
                            if(value.length < 5){
                                return '长度不够';
                            }
                        },
                        address: function(value){
                            if(value.length == 0){
                                return '地址不能为空';
                            }
                        }
                    });

                    // 监听提交操作
                    form.on('submit(data-submit-btn)', function (data) {
                        var result = JSON.stringify(data.field);
                        alert(result);
                        return false;
                    });
                },
                resetEvent:function(){
                    // 监听提交操作
                    form.on('submit(data-reset-btn)', function (data) {
                        $("#myform").get(0).reset();
                        return false;
                    });
                }
            }
        });
    });
</script>

</body>
</html>